import { PropsWithChildren, useState } from "react";
import styles from "../index.module.css";
import { Progress, Spin } from "antd";
import { Condition } from "@/components/Condition";
import { useAppStore } from "@/store";
import { Loading } from "@/components/Loading";

interface IDocGenerationIndexProps {
  className?: string;
  onSubmit: (s: string) => void;
}
export function DocGenerationIndex(
  props: PropsWithChildren<IDocGenerationIndexProps>
) {
  const { onSubmit } = props;
  const [type, setType] = useState(1);
  const [loadingPercent, setLoadingPercent] = useState(0);
  const [inputValue, setInputValue] = useState("");
  const [loading, setLoading] = useState(false);
  // const isYongGongXia = useAppStore((state) => state.isYongGongXia);
  const [isYongGongXia] = useState(true);

  return (
    <div className="px-[76px] pt-[70px] flex flex-col items-center h-full">
      <img src="/images/logo-mini.png" className="w-[36px]" />
      <Condition condition={isYongGongXia}>
        <div className={[styles.title].join(" ")} style={{ color: "#2C79F1" }}>
          劳动用工文书一键生成
        </div>
        <div className={styles.desc}>
          我可以根据您的需求，自动生成劳动合同、规章制度、协议及法律意见书等。
        </div>
      </Condition>
      <Condition condition={!isYongGongXia}>
        <div className={[styles.title].join(" ")} style={{ color: "#2C79F1" }}>
          文书生成，一键生成专属法律文书
        </div>
        <div className={styles.desc}>
          根据案情描述，自动总结法律诉求并撰写法律文书。
        </div>
      </Condition>

      <div className="w-full flex flex-col items-start justify-start mt-[35px]">
        <div className="GenerateMode__TextBox w-full">
          <div className="GenerateMode__TextBox__Inner">
            <div className="Prefix">
              <img src="/images/magic.png" alt="" />
            </div>
            <textarea
              placeholder={
                isYongGongXia
                  ? `请您尽可能详细地描述需求：
如劳动合同，请描述公司工作时间、薪酬结构要求等；
如规章制度，请描述适用对象、需涵盖的内容大类等；
如法律意见书，请描述案件原告和被告身份信息、案情事实和法律诉求等。`
                  : "请您尽可能详细地描述案情事实和法律诉求，包括原告和被告的身份信息，事情发生的时间、地点、起因、经过和结果信息等。"
              }
              rows={5}
              maxLength={8001}
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              className="ant-input css-1hfiukn ant-input-borderless h-full"
            ></textarea>
            <div className="GenerateMode__FloatActionLayer">
              <span
                className="ThemeButton ThemeButton--Primary--Disabled"
                onClick={async () => {
                  setLoadingPercent(0);
                  setLoading(true);
                  try {
                    await Promise.all([
                      onSubmit(inputValue),
                      new Promise((resolve) => {
                        const _timer = setInterval(() => {
                          setLoadingPercent((n) => {
                            if (n >= 99) {
                              clearInterval(_timer);
                              resolve(true);
                              return 100;
                            }
                            return n + 1;
                          });
                        }, 100);
                      }),
                    ]);
                    setLoadingPercent(100);
                    setLoading(false);
                  } catch (err) {
                    setLoading(false);
                  }
                  setInputValue("");
                }}
              >
                <button
                  type="button"
                  className="ant-btn css-1hfiukn ant-btn-primary ant-btn-lg pl-[16px] pr-[16px] h-[40px]"
                  disabled={false}
                >
                  <span>立即撰写</span>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>

      {loading && (
        <Loading>
          <Progress percent={loadingPercent} />
          <div>正在加载中，请稍等...</div>
        </Loading>
      )}
    </div>
  );
}
